import React, { useEffect, useState } from 'react'
import "../../../api/Data"
import request from "../../../api/request"
import { useDispatch, useSelector } from "react-redux"
import { ALLSTATE, GETLIST } from "../../../types/store.d"
import { Tabs, NavBar, Search, Sidebar, Image, ProductCard, Tag, Grid } from 'react-vant';
import { WeappNav, Aim, AddO } from '@react-vant/icons';

function Classify() {
  const dispatch = useDispatch()
  useEffect(() => {
    request.get("/api/list").then(res => {
      dispatch({
        type: GETLIST,
        payload: res.data.list
      })
    })
  }, [])
  const listArr = useSelector((state: ALLSTATE) => {
    return state.listArr
  })
  console.log(listArr, "====");

  return (
    <div className="classify">
      {
        listArr.map((item, index) => {
          return <div key={index}>
            <div className="imgs" style={{ display: "flex", justifyContent: "space-around", flexDirection: "row" }}>
              {
                item.imgs.map((tem, inde) => {
                  return <img key={inde} src={tem} />
                })
              }
            </div>
            <p><button style={{ width:'80px',height:'50px',marginLeft:'30px'}}>男生</button><button style={{ width:'80px',height:'50px',marginLeft:'30px'}}>女生</button><button style={{ width:'80px',height:'50px',marginLeft:'30px'}}>完本</button></p>
            <div style={{ margin:"10px 0" }}>
              <p>重磅推荐</p>
              {
                item.conone.map((item, i) => {
                  return (
                    <ProductCard key={i}
                      desc={item.desc}
                      title={item.title}
                      thumb={item.img}
                    />
                  );
                })
              }
            </div>
            <div >
              <p>男生爱看</p>
              <Tabs active={0}>
                {item.contwo.map((item, index) => (
                  <Tabs.TabPane key={index} title={item.name}>
                    <div>
                      {
                        item.info.map((v: any, i: number) => {
                          return (
                            <ProductCard key={i}
                              desc={v.desc}
                              title={v.title}
                              thumb={v.img}
                            />
                          );
                        })
                      }
                    </div>
                  </Tabs.TabPane>
                ))}
              </Tabs>

            </div>
          </div>
        })
      }
    </div>
  )
}

export default Classify